<template>
  <anji-crud :option="crudOption" />
</template>
<script>
import { getRoleList, queryRoleByPrimarykey, addRole, editRole, deleteRoles } from '@/api/authority'
export default {
  name: 'Demo2',
  components: {
    anjiCrud: require('@/components/AnjiPlus/anji-crud/anji-crud').default,
  },
  data() {
    return {
      crudOption: {
        // 查询表单条件
        queryFormFields: [
          {
            inputType: 'anji-select', //form表单类型 input|anji-select(传递url或者dictCode)|date|datetime|datetimerange
            anjiSelectOption: {
              url: '/auth/org/queryAllOrg',
              label: 'orgName',
              option: 'orgCode'
            },
            label: '所属机构',
            field: 'orgCode',
            rules: { required: true, message: this.$t('placeholder.input'), trigger: 'change' },
          },
          {
            inputType: 'input',
            label: '角色编号',
            field: 'roleCode',
          },
          {
            inputType: 'input',
            label: '角色名称',
            field: 'roleName',
          },
          {
            inputType: 'anji-select',
            anjiSelectOption: {
              dictCode: 'ENABLE_FLAG',
            },
            label: '启用状态',
            field: 'enabled',
            rules: { required: true, message: this.$t('placeholder.input'), trigger: 'change' },
          },
          {
            inputType: 'input',
            label: '角色备注',
            field: 'remark',
          },
        ],

        // 操作按钮
        buttons: {
          query: {
            api: getRoleList,
            permission: 'gaeaRoleController#query'
          },
          queryByPrimarykey: {
            api: queryRoleByPrimarykey,
            permission: 'gaeaRoleController#query'
          },
          add: {
            api: addRole,
            permission: 'gaeaRoleController#insert'
          },
          delete: {
            api: deleteRoles,
            permission: 'gaeaRoleController#deleteById'
          },
          edit: {
            api: editRole,
            permission: 'gaeaRoleController#update'
          },
        },
        // 表格列
        columns: [
          /*
          {
            label: '',
            field: 'id',
            primaryKey: true, // 根据主键查询详情或者根据主键删除时, 主键的

            tableHide: true, // 表格中不显示

            // 以下为编辑查看弹框的配置
            editHide: true, // 编辑弹框中不显示
            inputType: 'input', // 编辑查看表单组件类型  editHide=false时，必填，input|anji-select(传递url或者dictCode)|date|datetime|datetimerange

            //inputType='anji-select'时指定
            anjiSelectOption: {
              dictCode: 'ENABLE_FLAG', //指定数据字典

              url: '/auth/org/queryAllOrg', //指定接口
              label: 'orgName',  //接口中orgName字段做为下拉显示文字
              option: 'orgCode', //接口中orgCode字段做为下拉提交值
            },

            rules: [], //校验规则
            placeholder: '',
            disabled: false, //不可编辑
          },
          */
          {
            label: '',
            field: 'id',
            primaryKey: true, // 根据主键查询详情或者根据主键删除时, 主键的

            tableHide: true, // 表格中不显示
            editHide: true, // 编辑弹框中不显示
          },
          {
            // 以下为表格的配置
            label: '角色编号', // 列名称，必填
            field: 'roleCode', // 字段名，必填

            // 以下为编辑查看弹框的配置
            inputType: 'input', // 编辑查看表单组件类型  input anji-select
            rules: [//校验规则
              { required: true, message: this.$t('placeholder.input'), trigger: 'blur' },
              { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
            ],
            placeholder: '',
            disabled: false,
          },
          {
            label: '角色名称',
            field: 'roleName',

            inputType: 'input',
            rules: [
              { required: true, message: this.$t('placeholder.input'), trigger: 'blur' },
              { min: 1, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
            ],
            placeholder: '',
            disabled: false,
          },
          {
            label: '所属机构',
            field: 'orgCode',

            inputType: 'anji-select',
            anjiSelectOption: {
              url: '/auth/org/queryAllOrg',
              label: 'orgName',
              option: 'orgCode',
            },
            rules: [
              { required: true, message: this.$t('placeholder.input'), trigger: 'blur' },
            ],
            placeholder: '',
            disabled: false,
          },
          {
            label: '启用状态',
            field: 'enabled',

            inputType: 'anji-select',
            anjiSelectOption: {
              dictCode: 'ENABLE_FLAG',
            },
            rules: [
              { required: true, message: this.$t('placeholder.input'), trigger: 'blur' },
            ],
          },
          {
            label: '角色备注',
            field: 'remark',

            inputType: 'input',
            placeholder: '',
          },
        ],

        // 弹框配置
        editDialog: {
          labelWidth: '100px',
        }
      },
    }
  },
}
</script>
